<template>
    <div class="major-box">
        <div class="search-row">
            <div class="search-item">
                <el-select v-model="value" class="m-2" placeholder="请选择年级">
                    <el-option key="o" label="未激活" value="未激活" />
                    <el-option key="o" label="禁用" value="禁用" />
                    <el-option key="o" label="禁用" value="禁用" />
                </el-select>
            </div>
            <div class="search-actions">
                <el-button type="primary">
                    <el-icon><Search /></el-icon>查询
                </el-button>
                <el-button @click="uploadBook()">
                    <el-icon><RefreshLeft /></el-icon>重置
                </el-button>
            </div>
        </div>
        <div class="table-area">
            <div class="left-buttons">
                <el-button type="primary" @click="addTeacher"> 新增 </el-button>
            </div>
            <el-table ref="multipleTableRef" :data="grade" style="width: 100%" @selection-change="handleSelectionChange" >
                <el-table-column prop="title" label="姓名" />
                <el-table-column prop="desc" label="描述" />
                <el-table-column property="name" label="操作" width="120" align="center">
                    <template #default="scope">
                        <div class="material-operations">
                            <el-link type="primary" @click="addStu(scope.row)" underline="false"><span>编辑</span></el-link>
                            <el-link type="danger" @click="previewMaterial(scope.row)" underline="false"><span class="danger">删除</span></el-link>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
            </div>
        </div>
    </div>
    <el-dialog v-model="addDialogVisable" title="Tips" width="30%">
        <template #header>
            <div class="my-header">
                <span></span>
            </div>
        </template>
        <div class="teacher-dialog">
            <div class="add-form">
                <div class="items" style="flex: 0 0 120px;">
                    <div class="text">年级（入学年份）</div>
                    <div class="reds">*</div>
                </div>
                <el-input v-model="input" placeholder="请输入年级（入学年份）" />
            </div>
            <div class="add-form">
                <div class="items" style="flex: 0 0 120px;">
                    <div class="text">描述</div>
                </div>
                <el-input v-model="input" placeholder="请完善年级描述" />
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addTeacher()">取消</el-button>
                <el-button type="primary" @click="addTeacher()">完成</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
    import { ref } from 'vue'
    import { RefreshLeft,Search } from '@element-plus/icons-vue'
    const addDialogVisable = ref(false);
    const grade = ref([
        {
            title: '2025级',
            desc: '描述占位',
        },{
            title: '2025级',
            desc: '描述占位',
        },{
            title: '2025级',
            desc: '描述占位',
        },{
            title: '2025级',
            desc: '描述占位',
        },{
            title: '2025级',
            desc: '描述占位',
        },{
            title: '2025级',
            desc: '描述占位',
        },{
            title: '2025级',
            desc: '描述占位',
        },{
            title: '2025级',
            desc: '描述占位',
        },{
            title: '2025级',
            desc: '描述占位',
        },
    ]);
    const addTeacher = () => {
        addDialogVisable.value = !addDialogVisable.value;
    }
    const addStu = () => {
        addDialogVisable.value = !addDialogVisable.value;
    }
</script>
<style scoped>
    :deep(.el-input__wrapper){background: #F2F3FA!important;}
    :deep(.el-table__row:nth-child(odd)){background: #ffffff!important;}
    :deep(.el-table__row:nth-child(even)){background: #F5F8FE!important;}
    :deep(.el-table th.el-table__cell) { background-color: #D2E3FB; }
    :deep(.el-input) { width: 100%;height: 35px; }
    :deep(.search-item .el-input) { flex: 0 0 200px;height: 35px; }
    :deep(.el-select) { flex: 0 0 200px;height: 35px; }
    :deep(.el-select__wrapper) { height: 35px; }
    :deep(.dialog-footer span) { font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px!important; }
    .major-box{width: 100%;padding-bottom: 30px;border-radius: 8px;height: calc(85vh + 20px);background-color: #fff; }
    .search-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px;background: #fff;padding: 20px 20px 0 20px;border-radius: 8px;justify-content: space-between; }
    .search-item { display: flex;flex-direction: row;gap: 20px; }
    .el-button:hover{color: #1465E1!important;border: 1px solid #1465E1;}
    .el-button--primary{background: #1465E1!important;border: 1px solid #1465E1;}
    .el-button--primary:hover{color: #fff!important;}
    .table-area { background: white; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);height:calc( 100% - 40px);padding: 0 20px; }
    .table-area .text{ width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .pages{display: flex;flex-direction: row;justify-content: end;padding-top: 30px;}
    .material-operations{display: flex;justify-content: space-around;font-family: 微软雅黑, Microsoft YaHei, SimSun;}
    .material-operations span{font-size: 12px!important;}
    .material-operations span:hover{color: #1465E1;}
    .material-operations .danger:hover{color: red;}
    .add-major{width: 120px;background: #1465E1;height: 35px;display: flex;flex-direction: row;align-items: center;justify-content: center;border-radius: 4px;margin-bottom: 20px;cursor: pointer;}
    .add-major img{width: 20px;height: 20px;}
    .add-major span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;color: #fff;font-size: 14px;}
    .my-header{text-align: left;}
    .add-form{ width: calc(100% - 30px);margin: 10px auto;display: flex;flex-direction: row; gap: 20px; }
    .form-item{flex: 1;}
    .add-form .items{display: flex;flex-direction: row;gap: 5px;align-items: center;}
    .add-form .items .reds{ color: red; }
    .add-form .inputs{ margin-top: 10px; }
    .left-buttons { display: flex; gap: 12px; height: 55px; }
    .left-buttons img{width: 18px;}
    .left-buttons .btns{background: #1465E1;height: 35px;}
    .left-buttons .manage{color: #1465E1;height: 35px;border: 1px solid #1465E1;}
    .left-buttons span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;}
</style>